{% extends 'base.html' %}

{% block title %}{{ spare_part.name }} - 详情 - 维修管理系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>备件详情: {{ spare_part.name }}</h2>
    <div>
        <a href="{% url 'spare_parts:sku_edit' spare_part.pk %}" class="btn btn-outline-primary me-2">
            <i class="bi bi-pencil"></i> 编辑
        </a>
        <a href="{% url 'spare_parts:sku_management' %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> 返回列表
        </a>
    </div>
</div>

<div class="row">
    <!-- 基本信息 -->
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">基本信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>SKU编号:</strong><br>{{ spare_part.part_number }}</p>
                        <p><strong>名称:</strong><br>{{ spare_part.name }}</p>
                        <p><strong>型号规格:</strong><br>{{ spare_part.model }}</p>
                        <p><strong>分类:</strong><br>{{ spare_part.category.name|default:"-" }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>供应商:</strong><br>{{ spare_part.supplier.name|default:"-" }}</p>
                        <p><strong>供应商编号:</strong><br>{{ spare_part.supplier_part_number|default:"-" }}</p>
                        <p><strong>单位:</strong><br>{{ spare_part.unit }}</p>
                        <p><strong>单价:</strong><br>¥{{ spare_part.unit_price }}</p>
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-md-6">
                        <p><strong>状态:</strong>
                            <span class="badge 
                                {% if spare_part.status == 'active' %}bg-success
                                {% elif spare_part.status == 'discontinued' %}bg-secondary
                                {% else %}bg-dark{% endif %}">
                                {{ spare_part.get_status_display }}
                            </span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>库存状态:</strong>
                            <span class="badge 
                                {% if spare_part.stock_status == 'low' %}bg-danger
                                {% elif spare_part.stock_status == 'high' %}bg-warning
                                {% else %}bg-success{% endif %}">
                                {{ spare_part.get_stock_status_display }}
                            </span>
                        </p>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-6">
                        <p><strong>最低库存:</strong><br>{{ spare_part.min_stock }} {{ spare_part.unit }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>最高库存:</strong><br>{{ spare_part.max_stock }} {{ spare_part.unit }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 库存信息 -->
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">库存信息</h5>
            </div>
            <div class="card-body text-center">
                <h3 class="text-primary">{{ spare_part.current_stock }} {{ spare_part.unit }}</h3>
                <p class="text-muted">当前库存</p>
                
                <div class="progress mb-3" style="height: 20px;">
                    {% if spare_part.max_stock > 0 %}
                    {% widthratio spare_part.current_stock spare_part.max_stock 100 as stock_percent %}
                    <div class="progress-bar 
                        {% if stock_percent <= 20 %}bg-danger
                        {% elif stock_percent >= 80 %}bg-warning
                        {% else %}bg-success{% endif %}" 
                        role="progressbar" style="width: {{ stock_percent }}%;" 
                        aria-valuenow="{{ stock_percent }}" aria-valuemin="0" aria-valuemax="100">
                        {{ stock_percent }}%
                    </div>
                    {% else %}
                    <div class="progress-bar bg-info" role="progressbar" style="width: 100%;">
                        无库存限制
                    </div>
                    {% endif %}
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body py-2">
                                <h6 class="card-title mb-0">入库总量</h6>
                                <p class="card-text mb-0">
                                    {% with total_in=spare_part.inventory_records.all %}
                                    {% if total_in %}
                                        {{ total_in|length }} {{ spare_part.unit }}
                                    {% else %}
                                        0 {{ spare_part.unit }}
                                    {% endif %}
                                    {% endwith %}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body py-2">
                                <h6 class="card-title mb-0">出库总量</h6>
                                <p class="card-text mb-0">
                                    {% with total_out=spare_part.usage_records.all %}
                                    {% if total_out %}
                                        {{ total_out|length }} {{ spare_part.unit }}
                                    {% else %}
                                        0 {{ spare_part.unit }}
                                    {% endif %}
                                    {% endwith %}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 技术规格和备注 -->
<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">技术规格</h5>
            </div>
            <div class="card-body">
                {% if spare_part.specifications %}
                <p>{{ spare_part.specifications|linebreaks }}</p>
                {% else %}
                <p class="text-muted">暂无技术规格信息</p>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">备注</h5>
            </div>
            <div class="card-body">
                {% if spare_part.notes %}
                <p>{{ spare_part.notes|linebreaks }}</p>
                {% else %}
                <p class="text-muted">暂无备注信息</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 操作按钮 -->
<div class="card mb-4">
    <div class="card-body text-center">
        <a href="{% url 'spare_parts:inventory_add' %}?spare_part={{ spare_part.id }}" class="btn btn-primary me-2">
            <i class="bi bi-box-arrow-in-down"></i> 库存操作
        </a>
        <a href="{% url 'spare_parts:usage_add' %}?spare_part={{ spare_part.id }}" class="btn btn-success me-2">
            <i class="bi bi-clipboard-check"></i> 使用记录
        </a>
        <a href="{% url 'admin:spare_parts_sparepart_change' spare_part.id %}" class="btn btn-outline-secondary me-2">
            <i class="bi bi-gear"></i> 高级编辑
        </a>
        <form method="post" action="{% url 'spare_parts:sku_delete' spare_part.pk %}" style="display: inline;">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger" onclick="return confirm('确定要删除这个备件吗？此操作不可恢复！')">
                <i class="bi bi-trash"></i> 删除
            </button>
        </form>
    </div>
</div>

<!-- 最近库存记录 -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">最近库存记录</h5>
        <a href="{% url 'spare_parts:inventory_list' %}?q={{ spare_part.part_number }}" class="btn btn-sm btn-outline-primary">
            查看全部
        </a>
    </div>
    <div class="card-body">
        {% if inventory_records %}
        <div class="table-responsive">
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>操作类型</th>
                        <th>数量</th>
                        <th>操作人</th>
                        <th>操作时间</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in inventory_records %}
                    <tr>
                        <td>
                            <span class="badge 
                                {% if record.operation_type == 'in' %}bg-success
                                {% elif record.operation_type == 'out' %}bg-danger
                                {% else %}bg-info{% endif %}">
                                {{ record.get_operation_type_display }}
                            </span>
                        </td>
                        <td>{{ record.quantity }} {{ spare_part.unit }}</td>
                        <td>{{ record.operator.username|default:"系统" }}</td>
                        <td>{{ record.operation_date|date:"Y-m-d H:i" }}</td>
                        <td>{{ record.notes|truncatewords:5 }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-muted">暂无库存记录</p>
        {% endif %}
    </div>
</div>
{% endblock %}
